<template>
	<view class="profileBox">
		<van-notice-bar mode="closeable" text="初始登录头像和昵称为默认,可点击下方头像和昵称进行个性化修改" />
		<!-- 问候欢迎盒子 -->
		<view class="greetingBox">
			<text>欢迎回来~</text>
		</view>
		<!-- 用户信息盒子 -->
		<view class="userInfoBox">
			<!-- 用户状态信息 -->
			<view class="loginStateBox">
				<!-- 头像 -->
				<button class="avatarBox" open-type="chooseAvatar" @chooseavatar="chooseavatar">
					<image class="avatar" :src="userInfo.avatarUrl" mode="aspectFill"></image>
				</button>
				<!-- 昵称 -->
				<input class="nickName" @blur="changeNickName" type="nickname" :value="userInfo.nickName">
			</view>
		</view>
		<!-- 下方为用户信息 -->
		<profile-info :list="list"></profile-info>
	</view>
</template>

<script>
	import profileInfo from '@/components//profileInfo/profileInfo.vue'
	const app = getApp()

	export default {
		name: 'profile',
		components: {
			profileInfo
		},
		data() {
			return {
				// 判断用户是否已经登录
				hasUserInfo: true,
				// 用户信息
				userInfo: {},
				// 获取users_info中的数据
				list:{}
			}
		},
		// 当点击tabbar时触发
		onTabItemTap() {
			// 短震动效果
			uni.vibrateShort()
			console.log('震动');
		},
		methods: {
			// 换昵称
			changeNickName(res) {
				console.log(res.detail.value);
				uni.showLoading({
					title: '更换昵称中...'
				})
				// 将昵称添加到缓存中
				this.userInfo.nickName = res.detail.value
				uni.setStorageSync('userInfo', this.userInfo)
				// 并且在数据库里更新用户信息
				wx.cloud.callFunction({
					name: 'update_users_info',
					data: {
						type: 1,
						userInfo: this.userInfo
					}
				}).then(res => {
					console.log(res);
					uni.hideLoading()
				})
			},
			// 生成uuid 唯一名字
			uuid() {
				return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
					var r = Math.random() * 16 | 0,
						v = c == 'x' ? r : (r & 0x3 | 0x8);
					return v.toString(16);
				});
			},
			// 换头像
			chooseavatar(res) {
				// 随机生成云存储的图片名字
				let avatarTemp = res.detail.avatarUrl
				let preName = this.uuid()
				let imgFormat = avatarTemp.substring(avatarTemp.indexOf('.'))
				let imgName = preName + imgFormat
				// 上传图片
				wx.cloud.uploadFile({
					cloudPath: `shaoPAI users/${this.userInfo.openId}/${imgName}`,
					filePath: res.detail.avatarUrl
				}).then(res => {
					console.log(res)
					uni.showLoading({
						title: '更换头像中...'
					})
					// 将头像添加到缓存中
					this.userInfo.avatarUrl = res.fileID
					uni.setStorageSync('userInfo', this.userInfo)
					// 并且在数据库里更新用户信息
					wx.cloud.callFunction({
						name: 'update_users_info',
						data: {
							type: 0,
							userInfo: this.userInfo
						}
					}).then(res => {
						// 上传成功后
						console.log(res);
						uni.hideLoading()
					})
				}).catch(err => {
					console.log(err);
				})
			},
			// 是否已经登录了
			hadLogin() {
				const res = app.hasUserInfo()
				this.hasUserInfo = res
				if (!res) {
					return uni.navigateTo({
						url: '/pages/profile/unlogin'
					})
				}
				// 获取内存中的头像和昵称
				const userInfo = uni.getStorageSync('userInfo')
				this.userInfo = userInfo
			}
		},
		// 当页面加载时
		onLoad() {
			// 判断是否登录了
			this.hadLogin()
			wx.cloud.callFunction({
				name:'get_users_info'
			}).then(res=>{
				console.log(res);
				this.list = res.result.data[0]
			})
		},
		// 当页面显示时
		onShow() {
			// 判断是否登录了
			this.hadLogin()
		},
		// 下拉刷新
		onPullDownRefresh() {
			const res = app.hasUserInfo()
			this.hasUserInfo = res
			wx.cloud.callFunction({
				name:'get_users_info'
			}).then(res=>{
				console.log(res);
				this.list = res.result.data[0]
				uni.stopPullDownRefresh()
			})
		}
	}
</script>

<style scoped lang="scss">
	.profileBox {
		width: 100vw;
		// height: 100vh;
		background-color: #5a53c8;

		.van-notice-bar {
			position: fixed;
			top: 0;
		}

		// 问候欢迎盒子
		.greetingBox {
			// width: 750rpx;
			width: 100vw;
			height: 250rpx;
			background-color: #5a53c8;
			padding-left: 50rpx;
			padding-bottom: 50rpx;
			display: flex;
			align-items: center;
			box-sizing: border-box;

			text {
				color: white;
				font-size: 50rpx;
				// background-color: aliceblue;
			}
		}

		// 用户盒子
		.userInfoBox {
			width: 100vw;
			background-color: #282c35;
			// position: sticky;
			// top: 100rpx;
			position: relative;
			z-index: 2;

			// 用户状态信息
			.loginStateBox {
				width: 100vw;
				height: 150rpx;
				position: absolute;
				top: -80rpx;
				display: flex;
				align-items: center;

				// 用户头像盒子
				.avatarBox {
					width: 150rpx;
					height: 150rpx;
					margin-left: 50rpx;
					margin-right: 30rpx;
					border-radius: 20rpx;
					box-shadow: 0 0 16rpx #636363;
					position: relative;

					.avatar {
						width: 150rpx;
						height: 150rpx;
						position: absolute;
						left: 0;
					}
				}

				// 取消头像边框
				.avatarBox::after {
					border: none;
				}

				// 用户昵称
				.nickName {
					color: white;
					width: 500rpx;
					height: 75rpx;
					font-size: 45rpx;
					margin-top: -70rpx;
				}
			}
		}

	}
</style>
